<template>
    <div class="login-log" v-loading="isLoading">
        <!-- 组件文档请查阅: http://bearsee.com.cn/sibionics-ui-next/#/table -->
        <sib-table
            ref="sibTableRef"
            row-key="infoId"
            :search-config="searchConfig"
            :table-column="tableColumn"
            :request-config="requestConfig">
            <!-- 自定义插槽，插槽名称为对应列配置的 code -->
            <template #operate="{ row }">
                <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
            </template>
            <!-- 自定义表单与列表之间的内容 -->
            <template #operation-container>
                <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
                <el-button type="danger" plain icon="Delete" @click="handleClear">清空</el-button>
            </template>
        </sib-table>
    </div>
</template>

<script>
import { ref, reactive, inject } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

export default {
    name: 'LoginLog',
    setup() {
        const axios = inject('$axios');
        const isLoading = ref(false);
        const sibTableRef = ref(null);
        // 查询模块表单配置
        const searchConfig = reactive({
            rowFieldSize: 4,
            fields: [
                {
                    label: '用户名称',
                    code: 'userName',
                    type: 'text',
                    maxlength: 100,
                },
                {
                    label: '状态',
                    code: 'status',
                    type: 'select',
                    optionProps: { value: 'dictValue', label: 'dictLabel' },
                    requestConfig: {
                        url: 'common-status.json',
                        method: 'get',
                    },
                    options: [],
                },
            ],
        });
        // 表格表头配置
        const tableColumn = ref([
            {
                label: '用户名称',
                code: 'userName',
                minWidth: 100,
            },
            {
                label: '地址',
                code: 'ipaddr',
                minWidth: 130,
            },
            {
                label: '描述',
                code: 'msg',
                minWidth: 130,
            },
            {
                label: '操作状态',
                code: 'status',
                type: 'tag',
                tagType: ({ status }) => (String(status) === '0' ? 'success' : 'danger'),
                formatter: ({ status }) => ({ 0: '启用', 1: '禁用' })[status],
            },
            {
                label: '访问时间',
                code: 'loginTime',
                type: 'timeStamp',
                format: 'YYYY-MM-DD hh:mm',
                minWidth: 160,
            },
            {
                label: '操作',
                code: 'operate',
                type: 'slot',
                fixed: 'right',
                minWidth: 120,
            },
        ]);
        // 列表查询接口配置
        const requestConfig = reactive({
            url: 'login-log-list.json',
            method: 'get',
            // 点击查询后，自定义接口参数
            customSearchParams: obj => {
                const params = {};
                Object.keys(obj).forEach(key => {
                    if ([0, false].includes(obj[key]) || obj[key]) params[key] = obj[key];
                });
                return params;
            },
        });

        return {
            isLoading,
            sibTableRef,
            searchConfig,
            tableColumn,
            requestConfig,
            handleDelete(row) {
                ElMessageBox.confirm(`是否删除访问编号为【${row.infoId}】的数据项？`, '温馨提示').then(() => {
                    axios.delete(`/logininfor/${row.infoId}`).then(() => {
                        ElMessage({ type: 'success', message: '删除成功' });
                        sibTableRef.value.getTableData();
                    });
                }).catch(() => {});
            },
            handleClear() {
                ElMessageBox.confirm('是否确认清空所有操作日志数据项？', '温馨提示').then(() => {
                    axios.delete('/logininfor/clean').then(() => {
                        ElMessage({ type: 'success', message: '操作成功' });
                        sibTableRef.value.getTableData();
                    });
                }).catch(() => {});
            },
            handleExport() {
                isLoading.value = true;
                axios.post('/logininfor/export', sibTableRef.value.searchParams || {}, { responseType: 'blob' }).then(res => {
                    window.SIB.download(res, `logininfor_${new Date().getTime()}.xlsx`);
                    ElMessage({ type: 'success', message: '导出成功' });
                }).finally(() => {
                    isLoading.value = false;
                });
            },
        };
    },
};
</script>

<style lang="scss">
.login-log {
    .sib-table {
        height: 100%;
    }
}
</style>
